import React,{Component} from 'react'

import {Input,Checkbox,Tag, Button, Row, Col,Upload, Icon, Table,Select,Radio,message } from 'antd'

import BraftEditor from 'braft-editor'

import 'braft-editor/dist/braft.css'

import * as config from '../../config/config'

import './index.styl'

import {withRouter} from 'react-router-dom'

import {Head} from '../../common/common'

const { TextArea } = Input;

const Option = Select.Option;

const Label=(props)=>{
    return <div className="search-li">
                <label className="label-d">{props.name}</label>
                 <Input className={props.class} value="" defaultValue="" placeholder={props.plac}/>
                 <span className="info">{props.info}</span>
            </div>
  }

  const InSelet=(props)=>{
      return <div className="search-li">
                <label className="label-d">{props.name}</label>
                <Select
                mode="tags"
                style={{ width: '100%' }}
                onChange={props.handleChange}
                placeholder="Please select"
                tokenSeparators={[',']}
                >
                {props.arr.map((item,index)=>(
                    <Option key={index.toString()}>
                        <div >
                            <Radio>
                                {item.sernum}
                                {item.sername}
                            </Radio>
                        </div>
                    </Option>
                ))}
                </Select>
            </div>
  }
@withRouter
class Add extends Component{
    constructor(props){
        super(props)
        this.state={
            dataSources:[
                {
                    key: '1',
                    color: '#00000',
                    size: 32,
                    platprice:10,
                    markprice:10,
                    purchprice:10,
                    salesnum:10,
                    image:'',
                    color1: '西湖区湖底公园1号',
                    length:2
                  },
                  {
                    key: '2',
                    color: '#0000f',
                    size: 32,
                    platprice:10,
                    markprice:10,
                    purchprice:10,
                    salesnum:10,
                    image:'',
                    color1: '西湖区湖底公园1号',
                    length:2
                  },
                  {
                    key: '3',
                    color: '#0000f',
                    size: 32,
                    platprice:10,
                    markprice:10,
                    purchprice:10,
                    salesnum:10,
                    image:'',
                    color1: '西湖区湖底公园1号',
                  }
                  
            ],
            brand:[
                {
                    'sernum':123,
                    'sername':'大自然'
                },
                {
                    'sernum':3455533244444,
                    'sername':'大自然1'
                }
            ],
            supplierarr:[
                {
                    'sernum':123,
                    'sername':'大自然'
                },
                {
                    'sernum':3455533244444,
                    'sername':'大自然1'
                }              
            ],
            colorList:[
                '红色','蓝色','黄色'
            ],
            sizeList:[
                '31','32','33','34','35'
            ],
            sizeValue:'',
            colorValue:'',
            len:50,
            remanum:"",
            imageUrl:'',
            recomcontent:'',
            detailcontent:''


        }
        this.recomhandleHTMLChange=this.recomhandleHTMLChange.bind(this)
        this.detailhandleHTMLChange= this.detailhandleHTMLChange.bind(this)
    }
    handleChange(value){
        console.log(`selected ${value}`);
    }
    //标签添加
    tagAdd(arr,value){
        console.log(typeof value)
        console.log(arr.includes(value))
        if(value===""){
            message.warning("添加不能为空")
        }else{
            if (!arr.includes((value))){
                arr.push(value)
            }else{
                message.warning("添加重复")
            }
        }
        this.setState({
            arr: arr
        })
    }
    //input onchange
    vauleChange(e){
        this.setState({[e.target.name]:  e.target.value})
    }
    //还可输入
    handleRemainder(e){
        this.setState({
            remanum:e.target.value.slice(0,50),
        })

    }
    //图片上传
    //base64
    getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
      }
      //限制大小
    beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        if (!isJPG) {
        message.error('You can only upload JPG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
        }
        return isJPG && isLt2M;
    }
    handleImgChange = (info) => {
        if (info.file.status === 'uploading') {
          this.setState({ loading: true });
          return;
        }
        if (info.file.status === 'done') {
          // Get this url from response in real world.
          this.getBase64(info.file.originFileObj, imageUrl => this.setState({
            imageUrl,
            loading: false,
          }));
        }
      }
    //取消
    canel(url){
        this.props.history.push(url)
    }
    //推荐文案
    recomhandleHTMLChange=(rawContent)=>{
        this.setState({
            recomcontent:rawContent
        })
        console.log(rawContent)
    }
    //商品详情
    detailhandleHTMLChange(rawContent){
        this.setState({
            detailcontent:rawContent
        })
    }
    render(){
        const editorProps = {
            height: 400,
            contentFormat: 'html',
            forceNewLine:true,
            initialContent: this.state.recomcontent,
            onHTMLChange: this.recomhandleHTMLChange
          }
          const editorProps1 = {
            height: 400,
            forceNewLine:true,
            contentFormat: 'html',
            initialContent: this.state.detailcontent,
            onHTMLChange: this.detailhandleHTMLChange
          }
          const uploadButton = (
            <div>
              <Icon type={this.state.loading ? 'loading' : 'plus'} />
              <div className="ant-upload-text">Upload</div>
            </div>
          );
          const imageUrl = this.state.imageUrl;
          const columns = [{
            title: '颜色',
            dataIndex: 'color',
            key: 'color',
            render:(value, row, index) => {
                const obj = {
                    children: value,
                    props: {},
                  };
                  if (index === 0) {
                    obj.props.rowSpan = 2;
                  }
                  return obj;
            }
          }, {
            title: '尺寸',
            dataIndex: 'size',
            key: 'size',
          }, {
            title: '平台价',
            dataIndex: 'platprice',
            key: 'price',
          }, {
            title: '市场价',
            dataIndex: 'markprice',
            key: 'markprice',
          }, {
            title: '进价',
            dataIndex: 'purchprice',
            key: 'purchprice',
          }, {
            title: '销售库存',
            dataIndex: 'salesnum',
            key: 'salesnum',
          }, {
            title: '颜色1',
            dataIndex: 'color1',
            key: 'color1',
          }, {
            title: '图片',
            dataIndex: 'image',
            key: 'image',
          }];

        return(
            <div className="men-con">
                <Head name="商品信息"></Head>
                <div className="men-list">
                    <div className="li">
                        <label>商品名称：</label>
                        <div>茶花牌便携式便携式茶水分离套装</div>
                    </div>
                    <div className="li">
                        <label>选择类目：</label>
                        <div>茶花牌便携式便携式茶水分离套装</div>
                    </div>
                    <div className="li">
                        <label>付款方式：</label>
                        <div>茶花牌便携式便携式茶水分离套装</div>
                    </div>
                </div>
                <div className="moban">
                    <div className="li">
                        <label>商品信息模板：</label>
                        <div>茶花牌便携式便携式茶水分离套装</div>
                    </div>
                    <Button>返回修改</Button>
                </div>
                <div className="line"></div>
                <div className="brand-con">
                    <div className="brand-li">
                    <Row gutter={16} className="gutter-example">
                        <Col className="gutter-row" span={10} >
                            <InSelet name="所属品牌" arr={this.state.brand} handleChange={this.handleChange}>
                            </InSelet>
                        </Col>
                        <Col className="gutter-row" span={10} offset={2}>
                            <InSelet name="供应商信息" arr={this.state.supplierarr} handleChange={this.handleChange}>
                            </InSelet>
                        </Col>
                    </Row>                    
                    </div>
                    <div className="brand-li">
                        <div className="check-btn">
                            <Checkbox>包邮</Checkbox>
                            <span>（不勾选，默认不包邮）</span>
                            <Checkbox>推荐</Checkbox>
                            <span>（不勾选，默认不推荐）</span>
                            {this.state.detailcontent}
                            {this.state.recomcontent}
                        </div>
                    </div>
                    <div className="brand-li">
                        <Label name="展示权重" class="from-input" info="不填写，默认为0" plac="填写权重"></Label>
                        <Label name="购买基数" class="from-input" info="不填写，默认为0，以真实数字增长" plac="填写基数"></Label>
                    </div>
                </div>
                <Head name="价格信息"></Head>
                <div className="brand-li" style={{marginTop: '24px', padding: 0 }}>
                    <Label name="定金" class="from-input" info="元"  plac="亲输入定金"></Label>
                    <Label name="整体价格描述" class="from-input" info="也可以填入一段价格描述"  plac="填写价格描述"></Label>
                </div>
                <Head name="规格选择" info="从该商品信息模板中选择该商品所具有的规格"></Head>
                <div className="chose-men"  style={{marginTop: '24px', padding: '0px 17px' }}>
                    <div className="li">
                        <label>颜色</label>
                        <div className="color-li">
                            {this.state.colorList.map((item,index)=>(
                                <Tag closable key={index}>{item}</Tag>
                            ))}
                            <Input placeholder="自定义颜色" name="colorValue" value={this.state.colorValue} onChange={(e)=>this.vauleChange(e)}/>
                            <Button type="primary" style={{color:'#000000'}} onClick={(arr,value)=>this.tagAdd(this.state.colorList,this.state.colorValue)}>增加</Button>
                        </div>
                    </div>
                    <div className="li">
                        <label>尺寸</label>
                        <div className="color-li">
                        {this.state.sizeList.map((item,index)=>(
                                <Tag closable key={index}>{item}</Tag>
                            ))}
                            <Input placeholder="自定义尺寸" value={this.state.sizeValue} name="sizeValue" onChange={(e)=>this.vauleChange(e)}/>
                            <Button type="primary" style={{color:'#000000'}} onClick={(arr,value)=>this.tagAdd(this.state.sizeList,this.state.sizeValue)}>增加</Button>
                        </div>
                    </div>
                    <div className="spec-chose" style={{marginTop: '24px'}}>
                        <Table dataSource={this.state.dataSources} columns={columns} bordered pagination={false}></Table> 
                    </div>
                </div>
                <Head name="规格属性" info="帮助用户在二级类目下快速筛选商品，请务必填写。如需进行属性补充，请前往：属性管理"></Head>
                <div className="speci-con" style={{marginTop: '24px',padding:'0 17px'}}>
                    <div className="li">
                        <div className="title">类目属性</div>
                        <div className="cont">
                            <div className="child-li">
                                <label>区域：</label>
                                <div className="">
                                    <Checkbox>卧室</Checkbox>
                                    <Checkbox>客厅</Checkbox>
                                    <Checkbox>卧室</Checkbox>
                                    <Checkbox>客厅</Checkbox>
                                </div>
                            </div>
                            <div className="child-li">
                                <label>材质：</label>
                                <div className="">
                                    <Checkbox>卧室</Checkbox>
                                    <Checkbox>客厅</Checkbox>
                                    <Checkbox>卧室</Checkbox>
                                    <Checkbox>客厅</Checkbox>
                                </div>
                            </div>
                            <div className="child-li">
                                <label>试用：</label>
                                <div className="">
                                    <Checkbox>卧室</Checkbox>
                                    <Checkbox>客厅</Checkbox>
                                    <Checkbox>卧室</Checkbox>
                                    <Checkbox>客厅</Checkbox>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="li">
                        <div className="title">服务标签</div>
                        <div className="cont">
                            <div className="child-li">
                                <div className="">
                                    <Checkbox>卧室</Checkbox>
                                    <Checkbox>客厅</Checkbox>
                                    <Checkbox>卧室</Checkbox>
                                    <Checkbox>客厅</Checkbox>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="li">
                        <div className="title">营销标签</div>
                        <div className="cont">
                            <div className="child-li">
                                <div className="">
                                    <Checkbox>口碑好货</Checkbox>
                                    <Checkbox>运费险</Checkbox>
                                    <Checkbox>报价180天</Checkbox>
                                </div>
                            </div>
                        </div>
                    </div>                     
                </div>
                <div className="ship-photo">
                    <div className="ship-head">
                        <span>商品主图</span>
                        <span>主图大小为750*750px</span>
                    </div>
                    <div className="upload">
                    <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="//jsonplaceholder.typicode.com/posts/"
                            beforeUpload={this.beforeUpload}
                            onChange={this.handleImgChange}
                        >
                        {imageUrl ? <img src={imageUrl} alt="" /> : uploadButton}
                    </Upload>
                    </div>
                </div>
                <div className="ship-photo">
                    <div className="ship-head">
                        <span>顶部轮播图</span>
                        <span>尺寸： 750*750px，最多上传7张，权重越高排序越靠前，可批量上传 （不上传时，默认取主图）</span>
                    </div>
                    <div className="upload">
                    <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="//jsonplaceholder.typicode.com/posts/"
                            beforeUpload={this.beforeUpload}
                            onChange={this.handleChange}
                        >
                        {imageUrl ? <img src={imageUrl} alt="" /> : uploadButton}
                    </Upload>
                    </div>
                </div>
                <div className="ship-photo">
                    <div className="ship-head">
                        <span>矩形图</span>
                        <span>尺寸：750*320px  主分会场的商品矩形图；生活家板块的主商品图片</span>
                    </div>
                    <div className="upload">
                    <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="//jsonplaceholder.typicode.com/posts/"
                            beforeUpload={this.beforeUpload}
                            onChange={this.handleChange}
                        >
                        {imageUrl ? <img src={imageUrl} alt="" /> : uploadButton}
                    </Upload>
                    </div>
                </div>
                <div className="ship-info">
                    <div className="ship-head">
                            <span>商品简介</span>
                            <span>必填内容，50字以内</span>
                    </div>
                    <div className="ship-photo ship-input">
                        <TextArea rows={6} value={this.state.remanum} onChange={(e)=>this.handleRemainder(e)}></TextArea>
                        <div className="input-num">还可输入<span>{this.state.len-this.state.remanum.length>0?this.state.len-this.state.remanum.length:0}</span>字</div>
                    </div>
                </div>
                <div className="editoe-recom">
                    <div>推荐文案</div>
                    <div className="editoe">
                        <BraftEditor {...editorProps}/>
                    </div>
                    
                </div>
                <div className="editoe-recom">
                    <div>商品详情</div>
                    <div className="editoe">
                        <BraftEditor {...editorProps1}/>
                    </div>
                </div>
                <div className="form-button">
                    <Button type="primary" style={{color:'#666666'}}>提交</Button>
                    <Button>存草稿</Button>
                    <Button onClick={(url)=>this.canel('/home')}>取消</Button>
                </div>
            </div>
        )
    }
}
export default Add